<template>
  <div class="commanderDetail">
    <topBg :myBg="'home/groupLink/tgBg.png'" />
    <div class="userCard">
      <div class="jscenter">
        <nut-image
          class="userImg"
          round
          :src="
            receptData.organizer?.avatar
              ? receptData.organizer?.avatar
              : 'https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/avatar.png'
          "
          showError
        >
          <template #error>
            <nut-image
              src="https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/avatar.png"
            />
          </template>
        </nut-image>
        <div class="userCardCenter">
          <p class="name">{{ receptData.organizer?.nickname }}</p>
          <p class="personCount">
            跟团人数{{ receptData.organizer?.join_count }}
          </p>
        </div>
        <share-btn @myShare="shareWtg"></share-btn>
      </div>
      <div class="userCardBottom">{{ receptData.organizer?.user_intro }}</div>
    </div>

    <section v-if="receptData.list?.length > 0">
      <ul class="infiniteUl">
        <li
          class="infiniteLi"
          v-for="(product, index) in receptData.list"
          :key="index"
          @click="goTogroupLink(product)"
        >
          <homeCard :options="product"> </homeCard>
        </li>
      </ul>
      <p class="noMore">没有更多了</p>
    </section>
    <section v-else>
      <div class="default lcenter">
        <nut-image :src="getAssetsFile('home/defaultHome.png')" fit="contain" />
        <p>暂无团购</p>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import topBg from "../components/topBg/topBg.vue";
import shareBtn from "../components/utils/shareBtn.vue";
import homeCard from "../components/HomeCard.vue";
import { getAssetsFile, isRes } from "@/utils/pub-use";
import { useRoute, useRouter } from "vue-router";
import { getIndexApi } from "@/api/home/index";
import useCommonStore from "@/store/common";
const commonStore = useCommonStore();

//---------------------------------------获取团长所有团购---------------------------------------
const route = useRoute();
const getIndex = async () => {
  let res = await getIndexApi({ account: route.query.id });

  if (isRes(res)) {
    receptData.value = res.result;
  }
};
getIndex();

const receptData: any = ref({});
const shareWtg = () => {
  let body = {
    name: "微团购",
    icon: "http://emoji.mpshenghuo.com/icon_micro_group.jpg",
    title: "给大家安利一个优质团长~",
    userName: receptData.value.organizer?.nickname,
    userAvatar: receptData.value.organizer?.avatar,
    userDesc: receptData.value.organizer?.user_intro,
    followCounts: receptData.value.organizer?.join_count,
    productCounts: receptData.value?.count,
    // link: `http://192.168.10.23:9527/#/loading?type=1&&id=${receptData.value.organizer?.number}`,
    link: `${import.meta.env.VITE_BASE_URL}/#/loading?type=1&&id=${
      receptData.value.organizer?.number
    }`,
    type: "1",
  };
  console.log(body);
  if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
    window.webkit.messageHandlers.setShareData.postMessage(
      JSON.stringify(body)
    ); //调用ios方法
  } else if (/(Android)/i.test(navigator.userAgent)) {
    window.myjs.setShareData("微团购", JSON.stringify(body)); //myjs 是android端和js协商定义的调用对象, addFriend 是方法名,
  }
};
//---------------------------------------跳转到团购链接---------------------------------------
const router = useRouter();
const goTogroupLink = (item: any) => {
  router.push({
    path: "/home/groupLink",
    query: {
      id: item.serial_num,
      userId: item.id,
    },
  });
};
</script>

<style lang="scss" scoped>
.commanderDetail {
  background: #f8f9fa;

  height: -webkit-fill-available;
  section {
    width: calc(100% - 40px);
    margin: 0 auto;
    margin-top: 20px;
  }
  .userCard {
    margin-top: -153px;
    background: #ffffff;
    border-radius: 30px 30px 0px 0px;
    padding: 30px 30px 34px 30px;
    position: relative;
    .userImg {
      position: absolute;
      top: -30px;
      width: 140px;
      height: 140px;
      box-shadow: 0px 7px 12px 0px rgba(204, 230, 201, 0.33);
    }
    .userCardCenter {
      margin-left: 166px;
      margin-right: auto;
      .name {
        font-size: 36px;
        color: #000000;
        font-weight: 500;
      }
      .personCount {
        margin-top: 5px;
        font-size: 22px;
        color: #999999;
      }
    }
    .userCardBottom {
      margin-top: 40px;
      font-size: 24px;
      color: #666666;
    }
  }
  .infiniteUl {
    margin-top: 40px;
    .infiniteLi {
      margin-bottom: 40px;
    }
  }
  .noMore {
    color: #999999;
    font-size: 26px;
    text-align: center;
    padding-bottom: 40px;
  }
  .default {
    margin-top: 400px;
    .nut-image {
      :deep(img) {
        width: 301px;
        height: 245px;
      }
    }
    p {
      color: #999999;
      font-size: 28px;
    }
  }
}
</style>
